<template>
  <view class="credit" :style="'background-image:url(' + IMAGES.EXTENSION_BG_01 + ')'">
    <view class="ad" @tap="go('/pages/vip/index')">
      <image src="/static/images/credit/ad_bg01.png"></image>
      <view class="num">{{ state.setting.config.vipDebtRate }}</view>
      <button class="open-btn">前往开通</button>
    </view>
    <div class="quota-v2 bg-white text-center shadow radius">
      <view class="grid col-3">
        <view>
          <view>{{ info.debt_num }}</view>
          <view>已用额度</view>
        </view>
        <view>
          <view>{{ info.max - info.debt_num }}</view>
          <view>可用额度</view>
        </view>
        <view>
          <view>{{ info.max }}</view>
          <view>总额度</view>
        </view>
      </view>
      <view class="btn flex flex-direction-row justify-center align-center" style="margin-top: 20rpx;">
        <button @click="showModal" class="cu-btn round text-white" v-if="info.debt_num">归还鲜花</button>
        <button class="cu-btn round text-white" v-else style="background: #DDDDDD;">已结清</button>
   <!--     <view style="height: 64rpx;line-height: 64rpx;margin-left: 20rpx;">
          <text style="font-size: 24rpx;color: red;">1元 = 100鲜花</text>
        </view> -->
      </view>
      
    </div>
    <view class="borderBox"><text class="borderText">下列页面可直接使用</text></view>

    <view class="pitem-v2">
      <navigator url="/pages/video/index" class="pitem-v2-item">
        <div class="title">为喜欢到战队</div>
        <div class="desc">加油助威</div>
        <view class="icon"><image src="/static/images/credit/v2/right01.png"></image></view>
      </navigator>
      <navigator url="/pages/game/index" open-type="switchTab" class="pitem-v2-item">
        <div class="title">英雄乐</div>
        <div class="desc">体力买不停</div>
        <view class="icon"><image src="/static/images/credit/v2/right01.png"></image></view>
      </navigator>
    </view>

    <view class="modal" v-if="modal">
      <view class="modal-container">
        <view class="header">
          <view class="title">选择归还方式</view>
          <view class="icon cuIcon-close" @tap="hideModal"></view>
        </view>
        <view class="body">
          <view class="item" @click="onClickModalItem(0)" :class="{ active: current === 0 }">鲜花还款 {{ state.user.userInfo.flower < info.debt_num ? "(余额不足)" : "" }}</view>
          <view class="item" @click="onClickModalItem(1)" :class="{ active: current === 1 }">人民币还款</view>
        </view>
        <view class="footer">
          <button class="modal-btn" @tap="useFlowerPay" v-if="current === 0">需支付鲜花{{ info.debt_num }}</button>
          <button class="modal-btn" @tap="useRMBPay" v-else>需支付¥{{ Math.ceil((info.debt_num * 100) / state.setting.config.rmb2flowerRate) / 100 }}</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import uniApp from "@/utils/uni-app";
import { IMAGES } from "@/config/resources";
export default {
  computed: {
    IMAGES: () => IMAGES
  },
  data() {
    return {
      info: {},
      modal: false,
      current: 0
    };
  },
  onShow() {
    this.init();
  },
  onNavigationBarButtonTap(e) {
    if (e.index === 0) {
      this.go("/pages/credit/repaymentRecord");
    }
  },
  methods: {
    init() {
      let p1 = this.$store.dispatch("user/getUserInfo");
      let p2 = this.$api.credit.info();
      let p3 = this.$store.dispatch("setting/getConfig");
      return this.$api.fly.all([p1, p2, p3]).then(_ => {
        this.info = _[1].data.data;
        if (this.$store.state.user.userInfo.flower < this.info.debt_num) {
          this.current = 1;
        }
        return _;
      });
    },
    onClickModalItem(index) {
      if (index === 0 && this.$store.state.user.userInfo.flower < this.info.debt_num) {
        return false;
      }
      this.current = index;
    },
    useFlowerPay() {
      this.modal = false;
      this.$api.credit
        .useFlowerPay()
        .then(_ => {
          this.info = _.data.data.debt;
          uniApp.alert("归还成功");
        })
        .catch(e => {
          uniApp.alert(e.data.msg);
        });
    },
    useRMBPay() {
      this.$api.pay
        .buy({
          product: "repayment"
        })
        .then(_ => {
          if (_.data.data.status === 1) {
            uniApp.alert(_.data.data.msg);
          } else if (_.data.data.status === 2) {
            this.go(
              "/pages/common/pay?" +
                Object.keys(_.data.data.data)
                  .map(key => encodeURIComponent(key) + "=" + encodeURIComponent(_.data.data.data[key]))
                  .join("&")
            );
          } else {
            uniApp.alert(_.data.data.msg);
          }
        })
        .catch(e => {
          uniApp.alert(e.data.msg || "还款失败");
        });

      //this.$api.credit.useRMBPay().then(_ => {});
    },
    showModal() {
      if (this.info.debt_num > 0) {
        this.modal = true;
      }
    },
    hideModal() {
      this.modal = false;
    }
  },
  onPullDownRefresh() {
    this.init().then(_ => {
      uni.stopPullDownRefresh();
    });
  }
};
</script>

<style lang="scss" scoped>
.credit {
  background-color: #F8F8F8;
  padding-top: var(--status-bar-height);
  overflow: hidden;
  height: 100%;
  width: 100%;
  position: relative;
  background-size: 100%;
  background-repeat: no-repeat;
  .ad {
    position: relative;
    margin: 0 auto;
    margin-top: 120upx;
    width: 701upx;
    height: 272upx;
    image {
      width: 100%;
      height: 100%;
    }
    .num {
      width: 110upx;
      height: 70upx;
      color: #ffffff;
      text-align: center;
      line-height: 70upx;
      font-size: 70upx;
      text-shadow: 4upx 2upx 0 #ab7d19;
      position: absolute;
      left: 235upx;
      top: 95upx;
    }
    .open-btn {
      position: absolute;
      bottom: 35upx;
      left: 0;
      right: 0;
      color: #273461;
      font-size: 28upx;
      margin: 0 auto;
      width: 250upx;
      height: 60upx;
      line-height: 60upx;
      border-radius: 60upx;
      &:before,
      &:after {
        border: none;
      }
    }
  }
  .quota-v2 {
    border-radius: 20upx;
    overflow: hidden;
    width: 701upx;
    margin: 0 auto;
    margin-top: 20upx;
    background-image: url("~@/static/images/credit/v2/bg01.jpg");
    background-size: 100%;
    padding: 200upx 0 30upx 0;
    .grid {
      > view {
        > view:first-child {
          line-height: 80upx;
          font-size: 45upx;
          color: #000000;
        }
        > view:last-child {
          color: #7b7b7b;
          font-size: 26upx;
        }
      }
    }
    .cu-btn {
      padding: 0 40upx;
      background: linear-gradient(#0e62b4, #1289f0);
    }
  }
  .pitem-v2 {
    width: 701upx;
    margin: 20upx auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    &-item {
      width: 342upx;
      height: 141upx;
      padding: 18upx 26upx;
      background-size: 100% 100%;
      .title {
        font-weight: bold;
        font-size: 26upx;
      }
      .desc {
        font-size: 24upx;
        line-height: 36upx;
      }
      .icon {
        width: 28upx;
        height: 29upx;
        image {
          width: 100%;
          height: 100%;
        }
      }
      &:first-child {
        background-image: url("~@/static/images/credit/v2/icon-bg01.png");
      }
      &:last-child {
        background-image: url("~@/static/images/credit/v2/icon-bg02.png");
      }
    }
  }
  .modal {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-color: rgba($color: #000000, $alpha: 0.75);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .modal-container {
      width: 90%;
      .header {
        background-color: #0f86c3;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 15upx 20upx;
        font-size: 28upx;
      }
      .body {
        padding: 30upx 0;
        overflow: hidden;
        background-color: #ffffff;
        .item {
          border-radius: 6upx;
          border: 1px solid #dddddd;
          margin: 20upx;
          padding: 20upx 20upx;
          font-size: 28upx;
          &.active {
            border-color: #ffbd69;
          }
        }
      }
      .footer {
        padding: 0 0 20upx 0;
        background-color: #ffffff;
        button.modal-btn {
          background-color: #1289f0;
          color: #ffffff;
          font-size: 28upx;
          width: 90%;
          margin: 0 auto;
        }
      }
    }
  }
}
.borderBox {
  margin: 40rpx 0;
  border-bottom: 2rpx dashed #666666;
  position: relative;
}
.borderText {
  background-color: #F8F8F8;
  position: absolute;
  left: 0;
  right: 0;
  top: -20rpx;
  margin: 0 auto;
  width: 280rpx;
  overflow: hidden;
  color: red;
  text-align: center;
}
</style>
